{% extends 'base.html' %} {% block css%}
<style type="text/css">
    .b1 {
        color: blue;
    }
</style>
{% endblock %} {% block body%}
<div class="row">

    <div class="col-md-6">

        <div class="panel panel-default">
            <div class="panel-heading">
                加湿器控制设置
            </div>
            <div class="panel-body">
                <table class="table table-hover form-inline">
                    <tr>
                        <td style="font-size: 14px" width="40%">循环模式</td>
                        <td>
                            <input type="hidden" value="1" id="loop_mode">
                            <input type="checkbox" name="loop_mode_switch" id='loop_mode_switch'>                    
                        </td>
                    </tr>   

                    <tr>
                        <td style="font-size: 14px" >节能模式</td>
                        <td>
                            <input type="hidden" value="1" id="save_mode">
                            <input type="checkbox" name="save_mode_switch" id='save_mode_switch'>
                        </td>
                    </tr>   


                    <tr>
                        <td style="font-size: 14px" >第一路节能</td>
                        <td>
                            <input type="hidden" value="1" id="ch1_save">
                            <input type="checkbox" name="ch1_save_switch" id='ch1_save_switch'>                    
                        </td>
                    </tr>                                    

                    <tr>
                        <td style="font-size: 14px" >第二路节能</td>
                        <td>
                            <input type="hidden" value="1" id="ch2_save">
                            <input type="checkbox" name="ch2_save_switch" id='ch2_save_switch'>                       
                        </td>
                    </tr>      

                    <tr>
                        <td style="font-size: 14px" >第三路节能</td>
                        <td>
                            <input type="hidden" value="1" id="ch3_save">
                            <input type="checkbox" name="ch3_save_switch" id='ch3_save_switch'>                        
                        </td>
                    </tr>      

                    <tr>
                        <td style="font-size: 14px" >第四路节能</td>
                        <td>
                            <input type="hidden" value="1" id="ch4_save">
                            <input type="checkbox" name="ch4_save_switch" id='ch4_save_switch'>                        
                        </td>
                    </tr>     


                    <tr>
                        <td style="font-size: 14px" >节能开始时间</td>
                        <td>
                            <input class="form-control" type="number" max=23 min=0 step=1 style="width:100px; height: 32px;" id="save_start_time" />
                        </td>
                    </tr>

                    <tr>
                        <td style="font-size: 14px" >节能结束时间</td>
                        <td>
                            <input class="form-control" type="number" max=23 min=0 step=1 style="width:100px; height: 32px;" id="save_end_time" />
                        </td>
                    </tr>

                    <tr>
                        <td colspan="3">
                            <button class="btn btn-primary" id="btn_get">
                                获取
                            </button>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <button class="btn btn-success" id="btn_set">
                                设置
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
 
    </div>

</div>

{% endblock %} {% block js%}
{{ super() }}
<script type="text/javascript">


function set_humidifier_energy_saving_settings_param()
{
    $.post(
            "api/set_humidifier_energy_saving_settings_param", {
                arg1 : $("#loop_mode").val(),
                arg2 : $("#save_mode").val(),
                arg3 : $("#save_start_time").val(),
                arg4 : $("#save_end_time").val(),
                arg5 : $("#ch1_save").val(),
                arg6 : $("#ch2_save").val(),
                arg7 : $("#ch3_save").val(),
                arg8 : $("#ch4_save").val(),
            },
            function(data, status) {
                console.log("data: " + data);
                toastr["success"]("数据已设置.");
            }
        );
}

function get_humidifier_energy_saving_settings_param()
{
    $.post(
            "api/get_humidifier_energy_saving_settings_param", {
            },
            function(data, status) {
                console.log("data: " + data);
                toastr["success"]("数据已刷新.");
                d = JSON.parse(data);
                $.each(d,function(index,value){
                    $("#"+ index).val(value);		

                    // if(index == 'save_mode'){
                    //     console.log(index);
                    //     console.log(value);
                    //     $('#save_mode_switch').bootstrapSwitch('state', value=='1'?true:false);
                    // }

                    if( index == 'save_mode' || index == 'loop_mode' || 
                        index == 'ch1_save' || index == 'ch2_save' || 
                        index == 'ch3_save' || index == 'ch4_save' )
                    {
                        $('#' + index + '_switch').bootstrapSwitch('state', value=='1'?true:false);
                    }


                });
            }
        );
}

$(document).ready(function() {

    get_humidifier_energy_saving_settings_param();
    $("#btn_get").click(function() {
        get_humidifier_energy_saving_settings_param();
    });

    $("#btn_set").click(function() {
        set_humidifier_energy_saving_settings_param();
    });


    $("[name='save_mode_switch']").bootstrapSwitch(
        {  
            onText:"ON",  
            offText:"OFF",  
            onColor:"success",  
            offColor:"danger",  
            size:"normal",  
            onSwitchChange:function(event,state){  
                if(state==true)
                {  
                   console.log('ON...');  
                   $("#save_mode").val(1);
                }
                else
                {  
                    console.log('OFF...');  
                    $("#save_mode").val(0);
                }
                console.log('-------------------');
                console.log($("#save_mode").val());

            }
        }
    );


    $("[name='loop_mode_switch']").bootstrapSwitch(
        {  
            onText:"ON",  
            offText:"OFF",  
            onColor:"success",  
            offColor:"danger",  
            size:"normal",  
            onSwitchChange:function(event,state){  
                if(state==true)
                {  
                   console.log('ON...');  
                   $("#loop_mode").val(1);
                }
                else
                {  
                    console.log('OFF...');  
                    $("#loop_mode").val(0);
                }
                console.log('-------------------');
                console.log($("#loop_mode").val());

            }
        }
    );


    $("[name='ch1_save_switch']").bootstrapSwitch(
        {  
            onText:"ON",  
            offText:"OFF",  
            onColor:"success",  
            offColor:"danger",  
            size:"normal",  
            onSwitchChange:function(event,state){  
                if(state==true)
                {  
                   console.log('ON...');  
                   $("#ch1_save").val(1);
                }
                else
                {  
                    console.log('OFF...');  
                    $("#ch1_save").val(0);
                }
                console.log('-------------------');
                console.log($("#ch1_save").val());

            }
        }
    );

    $("[name='ch2_save_switch']").bootstrapSwitch(
        {  
            onText:"ON",  
            offText:"OFF",  
            onColor:"success",  
            offColor:"danger",  
            size:"normal",  
            onSwitchChange:function(event,state){  
                if(state==true)
                {  
                   console.log('ON...');  
                   $("#ch2_save").val(1);
                }
                else
                {  
                    console.log('OFF...');  
                    $("#ch2_save").val(0);
                }
                console.log('-------------------');
                console.log($("#ch2_save").val());

            }
        }
    );


    $("[name='ch3_save_switch']").bootstrapSwitch(
        {  
            onText:"ON",  
            offText:"OFF",  
            onColor:"success",  
            offColor:"danger",  
            size:"normal",  
            onSwitchChange:function(event,state){  
                if(state==true)
                {  
                   console.log('ON...');  
                   $("#ch3_save").val(1);
                }
                else
                {  
                    console.log('OFF...');  
                    $("#ch3_save").val(0);
                }
                console.log('-------------------');
                console.log($("#ch3_save").val());

            }
        }
    );


    $("[name='ch4_save_switch']").bootstrapSwitch(
        {  
            onText:"ON",  
            offText:"OFF",  
            onColor:"success",  
            offColor:"danger",  
            size:"normal",  
            onSwitchChange:function(event,state){  
                if(state==true)
                {  
                   console.log('ON...');  
                   $("#ch4_save").val(1);
                }
                else
                {  
                    console.log('OFF...');  
                    $("#ch4_save").val(0);
                }
                console.log('-------------------');
                console.log($("#ch4_save").val());

            }
        }
    );




});
</script>
{% endblock %}